<template>
  <div class="wp">
    <label>倒计时：</label>
    <div class="cd running5s running60s running15s running30s"></div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.wp {
  display: -webkit-box;
  font-size: 16px;
  padding:30px 20px 15px;
}
.wp label {
  font-size: 18px;
  color: #fff;
}
.wp .cd {
  -webkit-box-flex: 1;
  border: 2.5px solid #fff;
  border-radius: 9px;
  height: 9px;
  position: relative;
  top: 6px;
  padding-right: 3px;
}
.cd:after {
  content: "";
  display: block;
  background-color: #fff;
  height: 6px;
  width: 0%;
  border-radius: 7px;
  position: absolute;
  top: 1px;
  left: 2px;
}
.r5 .cd.running5s:after {
  animation: cd 5s linear;
}
.r60 .cd.running60s:after {
  animation: cd60 60s linear reverse;
}
.r15 .cd.running15s:after {
  animation: cd15 15s linear reverse;
}
.r30 .cd.running30s:after {
  animation: cd30 30s linear reverse;
}

@keyframes cd {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes cd60 {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes cd15 {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes cd30 {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
</style>
